<template>
	<div class="text-area">
		<van-field v-model="value" :fieldName="items.fieldName"
		 :required="items.isMustFill === '是'" :title="items.name" :readonly="true" :label="items.name" placeholder="请输入" is-link input-align="right" @click="writeValue(value)"/>		
		<div class="textarea" v-if="isShow">
			<top-bar :title="items.name" open="1" @closeText="close">
				<div slot="rightItem" class="bnt">
					<button @click="save(message)">保存</button>
				</div>
			</top-bar>
			<van-field v-model="message" rows="10" label="" type="textarea" :maxlength="items.fieldLength===2147483647?10000:items.fieldLength/4"
			 :placeholder="items.fieldAddTipText" show-word-limit />
		</div>
	</div>
</template>

<script>
	import { Dialog } from 'vant';
	import topBar from '@components/topBar.vue'
	import Vue from 'vue';
	Vue.use(Dialog);
	export default{
		data(){
			return{
				isShow: false,
				message: '',
				value: '',
			}
		},
		components:{
			topBar
		},
		props:['items'],
		created() {
			this.message = this.items.fieldDefaultValue
			this.value = this.items.fieldDefaultValue
		},
		methods:{
			writeValue(value) {
				this.message = value
				this.isShow = true
			},
			save(message) {
				this.isShow = false
				this.value = message
			},
			close() {
				if (this.message !== '') {
					Dialog.confirm({
							title: '提示',
							message: '是否保存内容',
						})
						.then(() => {
							this.isShow = false
							this.value = this.message
						})
						.catch(() => {
							this.isShow = false
						});
				} else {
					this.isShow = false
				}
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	/* 多行文本 */
	.textarea {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: $bg-1;
		z-index: 4;
		overflow: hidden;
	}
	
	.textarea-inner {
		margin-top: vw(12);
	}
	
	.bnt {
		text-align: right;
		overflow: hidden;
		height: 100%;
	}
	
	.bnt button {
		border: none;
		outline: none;
		height: 100%;
		color: $color4;
		background-color: $bg-1;
		margin-right: vw(12);
	}
</style>
